import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
import useFormStore, { setFormData } from 'src/context/usetypeformstore';
import ButtonToolList from 'src/components/buttonlist';
import api from 'api/config';

import './style.scss';
import classNames from 'classnames';
// import useVideoId from 'src/context/usevideoid';
const DetailPop = (props) => {
    const { videolist, data, num, handlepopclose, addfake, loadVideo } = props;

    const [renderdata, setRenderdata] = useState(data);
    const [rendernum, setRendernum] = useState(num);
    const { setSelectedType, selectedType } = useFormStore();
    const nowleftData = useFormStore();

    const listRef = useRef(null);

    const rightlist = videolist.filter((item, index) => {
        return item.status === 2;
    });

    const Icon =
        'https://img.alicdn.com/imgextra/i4/O1CN01AEtsTI1U0RPkqTqOy_!!6000000002455-55-tps-13-11.svg';
    const Arrow = (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            fill="none"
            version="1.1"
            width="20"
            height="20"
            viewBox="0 0 20 20"
        >
            <g transform="matrix(0,1,1,0,0,0)">
                <g>
                    <path
                        d="M15.5,9.375C15.8452,9.375,16.125,9.65483,16.125,10C16.125,10.34518,15.8452,10.625,15.5,10.625L6.2588799999999996,10.625L10.191939999999999,14.5581C10.309149999999999,14.6753,10.375,14.8342,10.375,15C10.375,15.1658,10.309149999999999,15.3247,10.191939999999999,15.4419C10.074729999999999,15.5592,9.915759999999999,15.625,9.75,15.625C9.584240000000001,15.625,9.425270000000001,15.5592,9.308060000000001,15.4419L4.30806,10.441939999999999C4.0639797,10.19786,4.0639797,9.80214,4.30806,9.558060000000001L9.308060000000001,4.55806C9.425270000000001,4.4408502,9.584240000000001,4.375000163913,9.75,4.375000163913C9.915759999999999,4.375000163913,10.074729999999999,4.4408502,10.191939999999999,4.55806C10.309149999999999,4.67527,10.375,4.83424,10.375,5C10.375,5.16576,10.309149999999999,5.32473,10.191939999999999,5.44194L6.2588799999999996,9.375L15.5,9.375Z"
                        fill="#FAFAFC"
                        fillOpacity="1"
                    />
                </g>
            </g>
        </svg>
    );

    const types = {
        image: '图片生成',
        video: '视频生成',
    };

    const kuozhan = {
        variation: { 0: '轻微变化', 1: '强烈变化' },
        upscale: { 0: '稳定超分', 1: '创意超分' },
        remix: { 0: '强烈重塑', 1: '轻微重塑' },
    };

    const handleRewrite = useCallback((type, data) => {
        setSelectedType(type);

        if (type === 'image') {
            setFormData('image', data);
        }
        if (type === 'video') {
            setFormData('video', data);
        }
    }, []);

    const handleTovideo = async (data) => {
        try {
            const response = await api.post('/v1/tob/video-diffusion', data);
            if (response.status === 200) {
                //成功生成中就先触发一次重新加载
                addfake(
                    {
                        jobId: response.data.jobId,
                        params: data,
                        type: 'video',
                        status: 1,
                        resultUrl: [],
                    },
                    'video'
                );
                // setFormData('video', initialState[selectedType]);
            }
        } catch (error) {}
    };

    const editfunction = async (data) => {
        try {
            const response = await api.post('/v1/tob/edit-image', data);

            if (response.status === 200) {
                //成功生成中就先触发一次重新加载
                // console.log(response.data.status, 'response.data.status');
                addfake(
                    {
                        jobId: response.data.jobId,
                        params: {
                            ...renderdata.params,
                            type: data.type,
                            parameters: data.parameters,
                        },
                        status: response.data.status,
                        resultUrl: [],
                        jobType: 1,
                    },
                    'image'
                );
            }
        } catch (error) {}
    };
    const edit = [
        {
            title: '继续创作',
            list: [
                {
                    stitle: '变化',
                    buttonlist: [
                        {
                            text: '轻微变化',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i1/O1CN01fJSjKY1JKd7OqUpP1_!!6000000001010-55-tps-18-18.svg',
                            onclick: () => {
                                setSelectedType('image');
                                editfunction({
                                    type: 'variation',
                                    parameters: {
                                        imageNo: rendernum,
                                        jobId: renderdata.jobId,
                                        remixPrompt: renderdata.params.prompts,
                                        type: 0,
                                    },
                                    prompts: renderdata.params.prompts,
                                    ratio: renderdata.params.ratio,
                                    version: renderdata.params.version,
                                });
                                handlepopclose();
                            },
                        },
                        {
                            text: '强烈变化',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i1/O1CN01MhFa1h27GG7wGpTns_!!6000000007769-55-tps-18-18.svg',
                            onclick: () => {
                                setSelectedType('image');
                                editfunction({
                                    type: 'variation',
                                    parameters: {
                                        imageNo: rendernum,
                                        jobId: renderdata.jobId,
                                        remixPrompt: renderdata.params.prompts,
                                        type: 1,
                                    },
                                    prompts: renderdata.params.prompts,
                                    ratio: renderdata.params.ratio,
                                    version: renderdata.params.version,
                                });
                                handlepopclose();
                            },
                        },
                    ],
                },
                {
                    stitle: '超分',
                    buttonlist: [
                        {
                            text: '稳定超分',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i1/O1CN016WFxxw1WuR5UJ4xW4_!!6000000002848-55-tps-18-18.svg',
                            onclick: () => {
                                setSelectedType('image');
                                editfunction({
                                    type: 'upscale',
                                    parameters: {
                                        imageNo: rendernum,
                                        jobId: renderdata.jobId,
                                        type: 0,
                                    },
                                    prompts: renderdata.params.prompts,
                                    ratio: renderdata.params.ratio,
                                    version: renderdata.params.version,
                                });
                                handlepopclose();
                            },
                        },
                        {
                            text: '创意超分',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i4/O1CN01sx99uk1mrGC1rYCqG_!!6000000005007-55-tps-18-18.svg',
                            onclick: () => {
                                setSelectedType('image');
                                editfunction({
                                    type: 'upscale',
                                    parameters: {
                                        imageNo: rendernum,
                                        jobId: renderdata.jobId,
                                        type: 1,
                                    },
                                    prompts: renderdata.params.prompts,
                                    ratio: renderdata.params.ratio,
                                    version: renderdata.params.version,
                                });
                                handlepopclose();
                            },
                        },
                    ],
                },
                {
                    stitle: '重塑',
                    buttonlist: [
                        {
                            text: '轻微重塑',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i2/O1CN01rpSIzC20oQMTEUwmC_!!6000000006896-55-tps-18-18.svg',
                            onclick: () => {
                                setSelectedType('image');
                                editfunction({
                                    type: 'remix',
                                    parameters: {
                                        imageNo: rendernum,
                                        jobId: renderdata.jobId,
                                        remixPrompt: renderdata.params.prompts,
                                        mode: 1,
                                    },
                                    prompts: renderdata.params.prompts,
                                    ratio: renderdata.params.ratio,
                                    version: renderdata.params.version,
                                });
                                handlepopclose();
                            },
                        },
                        {
                            text: '强烈重塑',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i2/O1CN01tklSKq1cQYwr9tF7z_!!6000000003595-55-tps-18-18.svg',
                            onclick: () => {
                                setSelectedType('image');
                                editfunction({
                                    type: 'remix',
                                    parameters: {
                                        imageNo: rendernum,
                                        jobId: renderdata.jobId,
                                        remixPrompt: renderdata.params.prompts,
                                        mode: 0,
                                    },
                                    prompts: renderdata.params.prompts,
                                    ratio: renderdata.params.ratio,
                                    version: renderdata.params.version,
                                });
                                handlepopclose();
                            },
                        },
                    ],
                },

                // {
                //     stitle: '延展',
                //     buttonlist: [
                //         { text: Arrow, type: 'image-expand-btn-noicon top' },
                //         { text: Arrow, type: 'image-expand-btn-noicon bottom' },
                //         { text: Arrow, type: 'image-expand-btn-noicon left' },
                //         { text: Arrow, type: 'image-expand-btn-noicon right' },
                //     ],
                // },
                // {
                //     stitle: '扩展',
                //     buttonlist: [
                //         { text: '1.5 x', type: 'image-expand-btn-noicon' },
                //         { text: '2 x', type: 'image-expand-btn-noicon' },
                //     ],
                // },
                {
                    stitle: '使用',
                    buttonlist: [
                        {
                            text: '作为底图参考',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i4/O1CN01ShBcwB21QREdDuy8w_!!6000000006979-55-tps-18-18.svg',
                            onclick: () => {
                                handlepopclose();
                                const data = nowleftData.image.bRefs;
                                handleRewrite('image', {
                                    bRefs:
                                        data.length <= 2
                                            ? data.concat([
                                                  renderdata.resultUrl[
                                                      rendernum
                                                  ],
                                              ])
                                            : nowleftData.image.bRefs,
                                });
                            },
                        },
                        {
                            text: '作为风格参考',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i3/O1CN01cD0ciJ25nZhprIz54_!!6000000007571-55-tps-18-18.svg',
                            onclick: () => {
                                handlepopclose();

                                const data = nowleftData.image.sRefs;
                                handleRewrite('image', {
                                    sRefs:
                                        data.length <= 2
                                            ? data.concat([
                                                  renderdata.resultUrl[
                                                      rendernum
                                                  ],
                                              ])
                                            : nowleftData.image.sRefs,
                                });
                            },
                        },
                        {
                            text: '复用提示词',
                            type: ' image-expand-btn-full',
                            icon: 'https://img.alicdn.com/imgextra/i4/O1CN017ucuwR1OaGimtw9C5_!!6000000001721-55-tps-18-18.svg',
                            onclick: () => {
                                handlepopclose();
                                handleRewrite('image', {
                                    prompts: renderdata.params.prompts || '',
                                });
                            },
                        },
                    ],
                },
                {
                    stitle: '更多',
                    buttonlist: [
                        {
                            text: '再次生成',
                            type: ' image-expand-btn-full',
                            icon: 'https://img.alicdn.com/imgextra/i3/O1CN01IMvArx1n3AUVD4eW9_!!6000000005033-55-tps-18-18.svg',
                            onclick: () => {
                                handlepopclose();
                                setSelectedType('image');
                                editfunction({
                                    type: 'reroll',
                                    parameters: {
                                        jobId: renderdata.jobId,
                                    },
                                    prompts: renderdata.params.prompts,
                                    ratio: renderdata.params.ratio,
                                    version: renderdata.params.version,
                                });
                            },
                        },
                    ],
                },
            ],
        },
        {
            title: '生成视频',
            list: [
                {
                    stitle: '首帧生成',
                    buttonlist: [
                        {
                            text: '慢速运动',
                            icon: 'https://img.alicdn.com/imgextra/i2/O1CN01BsfXdH1xB5UsW9ZqA_!!6000000006404-55-tps-18-18.svg',
                            type: '',
                            onclick: () => {
                                handlepopclose();
                                setSelectedType('video');
                                handleTovideo({
                                    version: '7',
                                    prompts: renderdata.params.prompts,
                                    firstFrame: renderdata.resultUrl[rendernum],
                                    lastFrame: '',
                                    isLoop: 0,
                                    onceGenerateNum: 4,
                                    motionSpeed: 'low',
                                    modelStyle: 'raw',
                                    resolution: 1,
                                });
                            },
                        },
                        {
                            text: '快速运动',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i3/O1CN01fM8Utg1ddDVVIdU49_!!6000000003758-55-tps-18-18.svg',
                            onclick: () => {
                                handlepopclose();
                                setSelectedType('video');
                                handleTovideo({
                                    version: '7',
                                    prompts: renderdata.params.prompts,
                                    firstFrame: renderdata.resultUrl[rendernum],
                                    lastFrame: '',
                                    isLoop: 0,
                                    onceGenerateNum: 4,
                                    motionSpeed: 'high',
                                    modelStyle: 'raw',
                                    resolution: 1,
                                });
                            },
                        },
                    ],
                },
                {
                    stitle: '首尾循环',
                    buttonlist: [
                        {
                            text: '慢速运动',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i2/O1CN01BsfXdH1xB5UsW9ZqA_!!6000000006404-55-tps-18-18.svg',
                            onclick: () => {
                                setSelectedType('video');

                                handleTovideo({
                                    version: '7',
                                    prompts: renderdata.params.prompts,
                                    firstFrame: renderdata.resultUrl[rendernum],
                                    lastFrame: '',
                                    isLoop: 1,
                                    onceGenerateNum: 4,
                                    motionSpeed: 'low',
                                    modelStyle: 'raw',
                                    resolution: 1,
                                });
                                handlepopclose();
                            },
                        },
                        {
                            text: '快速运动',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i3/O1CN01fM8Utg1ddDVVIdU49_!!6000000003758-55-tps-18-18.svg',
                            onclick: () => {
                                setSelectedType('video');

                                handleTovideo({
                                    version: '7',
                                    prompts: renderdata.params.prompts,
                                    firstFrame: renderdata.resultUrl[rendernum],
                                    lastFrame: '',
                                    isLoop: 1,
                                    onceGenerateNum: 4,
                                    motionSpeed: 'high',
                                    modelStyle: 'raw',
                                    resolution: 1,
                                });
                                handlepopclose();
                            },
                        },
                    ],
                },
            ],
        },
    ];

    const videoedit = [
        {
            title: '继续创作',
            list: [
                {
                    stitle: '使用',
                    buttonlist: [
                        {
                            text: '复用首帧图',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i4/O1CN01ShBcwB21QREdDuy8w_!!6000000006979-55-tps-18-18.svg',
                            onclick: () => {
                                handlepopclose();
                                handleRewrite('video', {
                                    firstFrame: renderdata.params.firstFrame,
                                });
                            },
                        },
                        {
                            text: '复用提示词',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i4/O1CN017ucuwR1OaGimtw9C5_!!6000000001721-55-tps-18-18.svg',
                            onclick: () => {
                                handlepopclose();
                                handleRewrite('video', {
                                    prompts: renderdata.params.prompts || '',
                                });
                            },
                        },
                    ],
                },
                {
                    stitle: '更多',
                    buttonlist: [
                        {
                            text: '再次生成',
                            type: 'image-expand-btn-full',
                            icon: 'https://img.alicdn.com/imgextra/i3/O1CN01IMvArx1n3AUVD4eW9_!!6000000005033-55-tps-18-18.svg',
                            onclick: async () => {
                                setSelectedType('video');
                                try {
                                    const response = await api.post(
                                        '/v1/tob/video-diffusion',

                                        {
                                            ...renderdata.params,
                                            lastFrame:
                                                renderdata.params.isLoop == 1
                                                    ? ''
                                                    : renderdata.params
                                                          .lastFrame,
                                        }
                                    );

                                    if (response.status === 200) {
                                        addfake(
                                            {
                                                jobId: response.data.jobId,
                                                params: renderdata.params,
                                                status: response.data.status,
                                                resultUrl: [],
                                            },
                                            'video'
                                        );
                                    }
                                } catch (error) {}
                                handlepopclose();
                            },
                        },
                    ],
                },
            ],
        },
        {
            title: '视频延展',
            list: [
                {
                    buttonlist: [
                        {
                            text: '慢速运动',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i2/O1CN01BsfXdH1xB5UsW9ZqA_!!6000000006404-55-tps-18-18.svg',
                            onclick: async () => {
                                setSelectedType('video');
                                try {
                                    const response = await api.post(
                                        '/v1/tob/video-diffusion',
                                        {
                                            ...renderdata.params,
                                            motionSpeed: 'low',
                                        }
                                    );

                                    if (response.status === 200) {
                                        addfake(
                                            {
                                                jobId: response.data.jobId,
                                                params: {
                                                    ...renderdata.params,
                                                    motionSpeed: 'low',
                                                },
                                                status: response.data.status,
                                                resultUrl: [],
                                            },
                                            'video'
                                        );
                                    }
                                } catch (error) {}
                                handlepopclose();
                            },
                        },
                        {
                            text: '快速运动',
                            type: '',
                            icon: 'https://img.alicdn.com/imgextra/i3/O1CN01fM8Utg1ddDVVIdU49_!!6000000003758-55-tps-18-18.svg',
                            onclick: async () => {
                                setSelectedType('video');
                                try {
                                    const response = await api.post(
                                        '/v1/tob/video-diffusion',
                                        {
                                            ...renderdata.params,
                                            motionSpeed: 'high',
                                        }
                                    );

                                    if (response.status === 200) {
                                        addfake(
                                            {
                                                jobId: response.data.jobId,
                                                params: {
                                                    ...renderdata.params,
                                                    motionSpeed: 'high',
                                                },
                                                status: response.data.status,
                                                resultUrl: [],
                                            },
                                            'video'
                                        );
                                    }
                                } catch (error) {}
                                handlepopclose();
                            },
                        },
                    ],
                },
            ],
        },
    ];

    // 每次选中项或列表变化时，滚动到当前选中项
    useEffect(() => {
        const container = listRef.current;
        if (!container) return;
        const selectedEl = container.querySelector('.pop-img-list-selected');
        if (selectedEl) {
            const offsetTop =
                selectedEl.offsetTop -
                container.clientHeight / 2 +
                selectedEl.clientHeight / 2;
            container.scrollTo({
                top: Math.max(0, offsetTop),
                behavior: 'smooth',
            });
        }
    }, [rightlist, renderdata, rendernum]);

    return (
        <div className="video-detail-pop">
            <div className="video-detail-pop-left">
                <div className="video-detail-pop-left-tool">
                    <div
                        className="video-detail-pop-close-button"
                        onClick={handlepopclose}
                    >
                        <img
                            src="https://img.alicdn.com/imgextra/i2/O1CN013nXzOD1Knlw3Yyb1N_!!6000000001209-55-tps-24-24.svg"
                            alt=""
                        />
                    </div>
                </div>
                <div className="video-detail-pop-left-content">
                    {renderdata.type === 'image' ? (
                        <img src={renderdata.resultUrl[rendernum]} alt="" />
                    ) : (
                        <video
                            width="100%"
                            className="page_head-video"
                            id="page_head-video"
                            src={renderdata.resultUrl[rendernum]}
                            preload="metadata"
                            muted
                            autoPlay={true}
                            playsInline
                            poster={renderdata.params.firstFrame}
                            style={{
                                width: '100%',
                                height: '100%',
                                objectFit: 'contain',
                                zIndex: 2,
                                position: 'relative',
                            }}
                            controls={true}
                            x-webkit-airplay="deny"
                            renderer="standard"
                            webkit-playsinline="webkit-playsinline"
                            x5-video-player-type="h5-page"
                            raw-controls="false"
                        />
                    )}
                </div>
            </div>
            <div className="video-detail-pop-detail">
                <ButtonToolList
                    data={renderdata}
                    imageUrl={renderdata.resultUrl[rendernum]}
                    index={rendernum}
                    inDetailPop={true} // 标识在弹窗中使用
                    onClosePop={handlepopclose} // 传递关闭弹窗函数
                    loadVideo={loadVideo}
                ></ButtonToolList>
                <div>
                    <div className="video-detail-pop-detail-type">
                        {renderdata.type === 'image' && renderdata.jobType == 1
                            ? renderdata.params.type == 'reroll'
                                ? '再次生图'
                                : kuozhan[renderdata.params.type][
                                      renderdata.params.type == 'remix'
                                          ? renderdata.params.parameters.mode
                                          : renderdata.params.parameters.type
                                  ]
                            : types[renderdata.type]}
                    </div>
                    <div className="video-detail-pop-detail-time">
                        {renderdata.finished_time}
                    </div>

                    <div className="video-detail-pop-detail-top-scrolls">
                        <div className="video-detail-pop-detail-imglist">
                            {renderdata.type === 'image' ? (
                                renderdata.params.bRefs
                                    ?.concat(
                                        renderdata.params.sRefs
                                            ? renderdata.params.sRefs
                                            : []
                                    )
                                    .concat(
                                        renderdata.params.uRefs
                                            ? renderdata.params.uRefs
                                            : []
                                    )
                                    .map((item, index) => {
                                        return (
                                            <div
                                                className="video-detail-pop-detail-img-small"
                                                key={index}
                                            >
                                                <img
                                                    src={item}
                                                    alt=""
                                                    key={index}
                                                />
                                            </div>
                                        );
                                    })
                            ) : (
                                <>
                                    {renderdata.params.firstFrame && (
                                        <div className="video-detail-pop-detail-img-small">
                                            <img
                                                src={
                                                    renderdata.params.firstFrame
                                                }
                                                alt=""
                                            />
                                        </div>
                                    )}
                                    {renderdata.params.lastFrame && (
                                        <div className="video-detail-pop-detail-img-small">
                                            <img
                                                src={
                                                    renderdata.params.lastFrame
                                                }
                                                alt=""
                                            />
                                        </div>
                                    )}
                                </>
                            )}
                        </div>
                        <div className="video-detail-pop-detail-prompt">
                            {renderdata.params.prompts}
                        </div>

                        <div className="video-detail-pop-detail-else">
                            {renderdata.type === 'image' && (
                                <>
                                    <div className="video-detail-pop-detail-imginfo">
                                        <p>比例</p>
                                        {renderdata.params.ratio}
                                    </div>
                                    <div className="video-detail-pop-detail-imginfo">
                                        <p>模型</p>
                                        {renderdata.params.version}
                                    </div>
                                </>
                            )}

                            {renderdata.type === 'video' && (
                                <>
                                    <div className="video-detail-pop-detail-imginfo">
                                        5s
                                    </div>
                                    <div className="video-detail-pop-detail-imginfo">
                                        <p>比例</p>
                                        9:16
                                    </div>
                                    <div className="video-detail-pop-detail-imginfo">
                                        <p>模型</p>
                                        {renderdata.params.version}
                                    </div>
                                </>
                            )}
                        </div>
                    </div>
                </div>
                <div className="video-detail-pop-detail-bottom-scroll">
                    <div className="image-expand">
                        {(renderdata.type === 'image' ? edit : videoedit).map(
                            (item, index) => {
                                return (
                                    <div
                                        className="image-expand-item"
                                        key={index}
                                    >
                                        <p className="image-expand-item-title">
                                            {item.title}
                                        </p>
                                        {item.list.map((sitem, sindex) => {
                                            return (
                                                <div
                                                    className={classNames(
                                                        'image-expand-sitem',
                                                        {
                                                            'image-expand-sitem-notitle':
                                                                !sitem.stitle,
                                                        }
                                                    )}
                                                    key={sindex}
                                                >
                                                    {sitem.stitle && (
                                                        <p className="image-expand-item-stitle">
                                                            {sitem.stitle}
                                                        </p>
                                                    )}
                                                    <div className="image-expand-btn-list">
                                                        {sitem.buttonlist.map(
                                                            (xitem, xindex) => {
                                                                return (
                                                                    <div
                                                                        className={`image-expand-btn ${xitem.type}`}
                                                                        key={
                                                                            xindex
                                                                        }
                                                                        onClick={
                                                                            xitem.onclick
                                                                        }
                                                                    >
                                                                        <img
                                                                            src={
                                                                                xitem.icon
                                                                            }
                                                                            alt=""
                                                                        />
                                                                        {
                                                                            xitem.text
                                                                        }
                                                                    </div>
                                                                );
                                                            }
                                                        )}
                                                    </div>
                                                </div>
                                            );
                                        })}
                                    </div>
                                );
                            }
                        )}
                    </div>
                </div>
            </div>
            <div className="video-detail-pop-right">
                <div className="video-detail-pop-img-list" ref={listRef}>
                    {rightlist.map((item, index) => {
                        return (
                            <div
                                className="video-detail-pop-img-group"
                                key={index}
                            >
                                {item.type === 'image' ? (
                                    <>
                                        {item.resultUrl.map((sitem, sindex) => {
                                            return (
                                                <img
                                                    className={
                                                        item.jobId ===
                                                            renderdata.jobId &&
                                                        sindex === rendernum
                                                            ? 'pop-img-list-selected'
                                                            : ''
                                                    }
                                                    src={sitem}
                                                    alt=""
                                                    key={sindex}
                                                    onClick={() => {
                                                        setRenderdata(item);
                                                        setRendernum(sindex);
                                                    }}
                                                />
                                            );
                                        })}
                                    </>
                                ) : (
                                    <>
                                        {[
                                            ...Array(
                                                item.params.onceGenerateNum
                                            ).keys(),
                                        ].map((sitem, sindex) => {
                                            return (
                                                <img
                                                    className={
                                                        item.jobId ===
                                                            renderdata.jobId &&
                                                        sindex === rendernum
                                                            ? 'pop-img-list-selected'
                                                            : ''
                                                    }
                                                    src={item.params.firstFrame}
                                                    alt=""
                                                    key={sindex}
                                                    onClick={() => {
                                                        setRenderdata(item);
                                                        setRendernum(sindex);
                                                    }}
                                                />
                                            );
                                        })}
                                    </>
                                )}
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
};

export default DetailPop;
